<template>
  <div class="header">
    <ul>
      <li>
        <router-link :to='"/?span="+new Date().getTime()'>
          <span :class="{active:active === 0}">总览</span>
        </router-link>
      </li>
      <li>
        <router-link :to='"/sign?span="+new Date().getTime()'>
          <span :class="{active:active === 1}">
            签约
          </span>
        </router-link>
      </li>
      <li>
        <router-link :to='"/receive?span="+new Date().getTime()'>
          <span :class="{active:active === 2}">回款</span>
        </router-link>
      </li>
      <li>
        <router-link :to='"/index?span="+new Date().getTime()'>
          <span :class="{active:active === 3}">资源</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      active: 0
    }
  },
  created () {
    this.active = this.$route.meta.active
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header {
  background: #152d5b;
  height: 3rem;
  line-height: 3rem;
  ul {
    display: flex;
    flex-direction: row;
    li {
      flex: 1;
      color: #6c86ad;
      // font-size: 0.875rem;
      font-size:1rem;
      font-weight:normal;
      a {
        color: #6c86ad;
        span.active {
          border-bottom: 0.1875rem solid #c3e0ff;
          padding-bottom: 0.1875rem;
          color: #c3e0ff;
        }
      }
    }
  }
}
</style>
